<ng-form name="form">
  <div class="autoscaling-form">
  <div ng-show="showNameInput" class="form-group">
    <label for="hpa-name" class="required">Autoscaler Name</label>
    <span ng-class="{ 'has-error': form.name.$touched && form.name.$invalid }">
      <input
          id="hpa-name"
          class="form-control"
          type="text"
          name="name"
          ng-model="autoscaling.name"
          ng-required="showNameInput"
          ng-readonly="nameReadOnly"
          ng-pattern="nameValidation.pattern"
          ng-maxlength="nameValidation.maxlength"
          select-on-focus
          autocorrect="off"
          autocapitalize="none"
          spellcheck="false"
          aria-describedby="hpa-name-help">
    </span>
    <div>
      <span id="hpa-name-help" class="help-block">
        A unique name for the horizontal pod autoscaler within the project.
      </span>
    </div>
    <div class="has-error" ng-show="form.name.$invalid && form.name.$touched">
      <span ng-if="form.name.$error.required" class="help-block">
        Name is required.
      </span>
      <span ng-show="form.name.$error.pattern" class="help-block">
        {{nameValidation.description}}
      </span>
      <span ng-show="form.name.$error.maxlength" class="help-block">
        <span class="help-block">
          Can't be longer than {{nameValidation.maxlength}} characters.
        </span>
      </span>
    </div>
  </div>
  <div class="form-group">
    <label>Min Pods</label>
    <span ng-class="{ 'has-error': form.minReplicas.$dirty && form.minReplicas.$invalid }">
      <input type="number"
             class="form-control"
             min="1"
             name="minReplicas"
             ng-model="autoscaling.minReplicas"
             pattern="\d*"
             select-on-focus
             aria-describedby="min-replicas-help">
    </span>
    <div id="min-replicas-help" class="help-block">
      The lower limit for the number of pods that can be set by the autoscaler.
      If not specified, defaults to 1.
    </div>
    <div class="has-error" ng-show="form.minReplicas.$dirty && form.minReplicas.$invalid">
      <span ng-if="form.minReplicas.$error.number" class="help-block">
        Min pods must be a number.
      </span>
      <span ng-if="form.minReplicas.$error.pattern" class="help-block">
        Min pods must be a whole number.
      </span>
      <span ng-if="form.minReplicas.$error.min" class="help-block">
        Min pods must be greater than or equal to 1.
      </span>
    </div>
  </div>
  <div class="form-group">
    <label class="required">Max Pods</label>
    <span ng-class="{ 'has-error': (form.minReplicas.$dirty || form.maxReplicas.$dirty) && form.maxReplicas.$invalid }">
      <input type="number"
             class="form-control"
             name="maxReplicas"
             required
             min="{{autoscaling.minReplicas || 1}}"
             ng-model="autoscaling.maxReplicas"
             pattern="\d*"
             select-on-focus
             aria-describedby="max-replicas-help">
    </span>
    <div id="max-replicas-help" class="help-block">
      The upper limit for the number of pods that can be set by the autoscaler.
    </div>
    <div class="has-error" ng-show="(form.minReplicas.$dirty || form.maxReplicas.$dirty) && form.maxReplicas.$invalid">
      <span ng-if="form.maxReplicas.$error.number" class="help-block">
        Max pods must be a number.
      </span>
      <span ng-if="form.minReplicas.$error.pattern" class="help-block">
        Min pods must be a whole number.
      </span>
      <span class="help-block" ng-if="form.maxReplicas.$error.min">
        Max pods must be greater than or equal to
        <span ng-if="autoscaling.minReplicas">min pods, which is</span>
        {{autoscaling.minReplicas || 1}}.
      </span>
      <span class="help-block" ng-if="form.maxReplicas.$error.required">
        Max pods is a required field.
      </span>
    </div>
  </div>
  <div ng-show="showRequestInput" class="form-group">
    <label>
      CPU Request Target
    </label>
    <div class="input-group" ng-class="{ 'has-error': form.targetCPU.$invalid && form.targetCPU.$touched }">
      <input type="number"
             class="form-control"
             min="1"
             name="targetCPU"
             ng-model="autoscaling.targetCPU"
             pattern="\d*"
             select-on-focus
             aria-describedby="target-cpu-help">
      <span class="input-group-addon">%</span>
    </div>
    <div id="target-cpu-help" class="help-block">
      The percentage of the CPU request that each pod should ideally be using.
      Pods will be added or removed periodically when CPU usage exceeds or
      drops below this target value.
    </div>
    <div class="learn-more-block">
      <a ng-href="{{'compute_resources' | helpLink}}" target="_blank">Learn More&nbsp;<i class="fa fa-external-link" aria-hidden="true"></i></a>
    </div>
    <!-- Add extra top margin for the learn more block -->
    <div class="has-error mar-top-md" ng-show="form.targetCPU.$touched && form.targetCPU.$invalid">
      <span ng-if="form.targetCPU.$error.number" class="help-block">
        Target CPU percentage must be a number.
      </span>
      <span ng-if="form.targetCPU.$error.pattern" class="help-block">
        Target CPU percentage must be a whole number.
      </span>
      <span ng-if="form.targetCPU.$error.min" class="help-block">
        Target CPU percentage must be greater than 1.
      </span>
    </div>
  </div>
  </div>
</ng-form>
